<template>
  <div class="content-list">
    <ul class="section-content">
      <li class="content-item" v-for="(item,index) in contentList" :key="index">
        <div class="kuo" @click="goAlbum(item.id,item.name)">
          <el-image :fit="fits" class="item-img" :src="attachImageUrl(item.pic)"></el-image>
          <div class="mask">
            <svg class="icon">
              <use xlink:href="#icon-bofang"></use>
            </svg>
          </div>
        </div>
        <p class="item-name">{{item.name||item.title}}</p>
      </li>
    </ul>
  </div>
</template>
<script>
  import {
    mixin
  } from '../mixins';
  export default {
    name: 'content-list',
    mixins: [mixin],
    props: ['contentList'],
    data(){
      return{
        fits:'cover',
      }
    },
    methods: {
      goAlbum(id, type) {
        if (type) { //歌手
          this.$store.commit('setActiveName', '');
          this.$router.push({path: '/oneSinger', query: { id: id}});
        } else { //歌单
          this.$store.commit('setActiveName', '');
          this.$router.push({path: '/oneSongList', query: { id: id}});
        }
      }
    }
  }
</script>
<style scoped>
  .content-list {
    min-height: 500px;
    padding: 0 20px;

  }

  .content-list .section-content {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .content-item {
    width: 18%;
    margin: 20px 1%;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
    position: relative;


  }

  .content-item :hover {
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.3);
  }

  .content-item :hover .item-img {
    transform: scale(1.1);
  }

  .content-item .item-name {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin: 10px 8px;
  }

  .item-img {
    width: 100%;
    height: 180px;
    transition: all 0.4s ease;
  }

  .kuo {
    width: 100%;
    padding-bottom: 100%;
    height: 0;
    overflow: hidden;
  }

  .mask {
    position: absolute;
    top: 0;
    background-color: rgba(52, 47, 41, 0.4);
    transition: all 0.3s ease-in-out;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: center;

  }

  .mask .icon {
    position: absolute;
    top: 40%;
  }

  .mask :hover {
    opacity: 1;
    cursor: pointer;
  }

  .icon {
    width: 2em;
    height: 2em;
    font-size: 2em;
    color: rgba(240, 240, 240, 1);
    fill: currentColor;
    overflow: hidden;
    position: relative
  }
</style>
